﻿@{

}
@section head{
    <link type="text/css" href="~/static/css/portlet.css" rel="stylesheet" />
    <script type="text/javascript" src="~/static/js/minifox.ui.js"></script>
    <script type="text/javascript" src="~/static/js/portlet.js"></script>
    <script type="text/javascript">

        $(function () {
            var service = MiniFox.createService({
                "defaults": {
                    "host": {
                        "BASE": ""
                    },
                    "autoMsg": false,
                    "timeOut": 120000,
                    "enableCookies": false,
                    "showProcessing": true,
                    "method": "post"
                },
                "adapters": [
                    {
                        "name": "portlet",
                        "host": "BASE",
                        "virtualPath": "",
                        "api": [
                            {
                                "name": "widgets",
                                "url": "@(Url.Action("widgets"))",
                                "method": "get"
                            },
                            {
                                "name": "save",
                                "url": "@(Url.Action("Save"))",
                                "method": "post"
                            }
                        ]
                    }
                ]
            });
            var taskData;
            function getWidgets(portlet) {
                if (taskData) {
                    taskData.forEach(function (task) {
                        var option = creatTaskOption(task);
                        portlet.createWidget(option);
                    });
                }
                else {
                    service.portlet.widgets().then(function (response) {
                        if (response.success) {
                            taskData = response.data;
                            taskData.forEach(function (task) {
                                var option = creatTaskOption(task);
                                portlet.createWidget(option);
                            });
                        }
                    });
                }
                portlet.hasUpdated = false;
            }
            function creatTaskOption(task) {
                return {
                    id: task.name,
                    name: `name-${task.name}`,
                    title: task.title,
                    icon: task.icon,
                    colSpan: task.colSpan,
                    rowSpan: task.rowSpan,
                    className: task.className,
                    enterUrl: task.enterUrl,
                    showHeader: task.showHeader,
                    showFooter: task.showFooter,
                    template: "#tmpl_widget",
                    schedule: task.schedule ? { delay: task.schedule.delay, once: task.schedule.once, interval: task.schedule.interval } : null,
                    dataSource: task.dataSource ? {
                        url: task.dataSource.url,
                        method: task.dataSource.method,
                        headers: task.dataSource.headers,
                        params: task.dataSource.params,
                        data: task.dataSource.data
                    } : null,
                    dataTemplate: task.template,
                    removed: function () {
                    }
                };
            }
            function loadWidgets(keyword) {
                var request = {
                    parameters: {
                        keyword: keyword || ""
                    }
                };
                $("#grid_Widgets").gridview({
                    checkBoxName: "widgets",
                    sortField: "publishTime",
                    dataloadUrl: "@(Url.Action("Widgets"))",
                    autoLoad: true,
                    requestData: request,
                    rowCreating: function (e) {
                        e.checked = portlet.widgets.any(function (item) {
                            return item.id == e.data.name;
                        });
                    },
                    rowChecked: function (e) {
                        var task = e.row;
                        var option = creatTaskOption(task);
                        if (e.checked) {
                            portlet.createWidget(option);
                        }
                        else {
                            portlet.removeWidget(option);
                        }
                    }
                });
            }
            function saveWidgets(callback) {
                service.portlet.save({
                    data: portlet.widgets.select(function (item) { return item.id; })
                }).then(function (response) {
                    if (response.success) {
                        portlet.hasUpdated = false;
                        taskData = response.data;
                        if ($.isFunction(callback)) {
                            callback();
                        }
                        $.alert("保存成功");
                        var agent = new MiniFox.Agent();
                        agent.sendMessage("reloadHome");
                    }
                });
            }
            function exitEdit() {
                $('#btn_widgets').hide();
                $('#btn_save').hide();
                $('#btn_saveQuit').hide();
                $('#btn_undo').hide();
                $('#btn_quit').hide();

                $('#btn_edit').show();
                portlet.exitEdit();
            }
            $("#widgetsDialog").dialog({
                autoOpen: false,
                title: "小工具",
                width: 600,
                height: 500,
                show: "fade",
                hide: "fade",
                resizable: false,
                modal: true,
                open: function(){
                    loadWidgets();
                },
                buttons: {
                    "取消": function () {
                        $(this).dialog("close");
                    }
                }
            });
            var portlet = new MiniFox.Portlet({
                element: "#portlet",
                editMode: false,
                replaceMode: true,
                created: function () {
                    getWidgets(this);
                },
                editing: function (hasUpdated) {
                    if (hasUpdated) {
                        $("#btn_undo").prop("disabled", false);
                    }
                    else {
                        $("#btn_undo").prop("disabled", true);
                    }
                }
            });
            
            $('#btn_widgets').click(function () {
                $("#widgetsDialog").dialog("open");
            });
            $('#btn_edit').click(function () {
                $(this).hide();
                $('#btn_widgets').show();
                $('#btn_save').show();
                $('#btn_saveQuit').show();
                $('#btn_undo').show();
                $('#btn_quit').show();
                portlet.enterEdit();
            });
            $('#btn_save').click(function () {
                saveWidgets();
            });
            $('#btn_saveQuit').click(function () {
                saveWidgets(exitEdit);
            });
            $('#btn_quit').click(function () {

                if (portlet.hasUpdated) {
                    $.confirm("要保存所做的修改吗?", "提示", function () {
                        saveWidgets(exitEdit);
                    }, exitEdit);
                }
                else {
                    exitEdit();
                }
            });
            $('#btn_undo').click(function () {
                
                portlet.clearWidgets();
                getWidgets(portlet);
            });
        });
    </script>

    <template id="tmpl_widget">
        <div class="widget col-sm-${colSpan} row-${rowSpan}" data-id="${id}">
            <div class="panel ${className}">
                {{if showHeader}}
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="${icon}"></i> ${title}</h3>
                </div>
                {{/if}}
                <div id="${name}" class="panel-body data-content">

                </div>
                {{if showFooter}}
                <div class="panel-footer">
                    <a class="more" href="#" data-url="${enterUrl}" data-icon="${icon}" title="${title}">
                        查看更多
                    </a>
                </div>
                {{/if}}

            </div>

            <div class="editMode" style="display: ${editMode?" block":"none"}">
                <div class="tool">
                    <div class="pull-right">
                        <a href="#" class="remove" data-target="${$data.id}">
                            <i class="glyphicon glyphicon-remove"></i>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </template>
}

<div class="container-fluid toolbar">
    <div class="row">
        <div class="col-sm-12">
            <button id="btn_widgets" class="btn btn-info btn-sm" style="display:none;" title="添加小工具"><i class="fa fa-wrench"></i> 工具箱</button>
            <button id="btn_save" class="btn btn-success btn-sm" style="display:none;" title="保存"><i class="fa fa-save"></i> 保存</button>
            <button id="btn_saveQuit" class="btn btn-success btn-sm" style="display:none;" title="保存并退出"><i class="fa fa-check"></i> 保存并退出</button>
            <button id="btn_undo" class="btn btn-warning btn-sm" disabled style="display:none;" title="撤消"><i class="fa fa-undo"></i> 撤消</button>
            <button id="btn_quit" class="btn btn-link btn-sm" style="display:none;" title="退出"><i class="fa fa-undo"></i> 退出</button>

            <button id="btn_edit" class="btn btn-primary btn-sm" title="编辑"><i class="fa fa-edit"></i> 编辑</button>
        </div>
    </div>
</div>
<div id="portlet" class="container-fluid portlet" style="height: calc(100% - 51px)">

</div>

<div id="widgetsDialog">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 input-group input-group-sm">
                <input type="text" name="Keyword" id="keyword" class="form-control" data-type="string" placeholder="请输入关键字" />
                <div class="input-group-addon">
                    <a id="btn_Search" href="#"><i class="glyphicon glyphicon-search"></i></a>
                </div>
            </div>
        </div>
        <div class="row" style="height: 360px;">
            <div id="grid_Widgets" class="gridview">

            </div>
        </div>
    </div>
</div>
